<template>
  <div class="guide no-side-menu layout-main">
    <div class="fs-26 tc">
      新手指引
    </div>
    <a-divider></a-divider>
    <div class="content-home" v-if="!showDetail">
      <a-row>
        <a-col :span="6" v-for="(item, key) in typeList" :key="item.title">
          <div class="content-item tc">
            <p class="title fs-18 primary">{{ item.title }}</p>
            <c-button
              v-for="i in item.buttons"
              :key="i.title"
              size="large"
              @click="checkDetail(i, key)"
              >{{ i.title }}
            </c-button>
          </div>
        </a-col>
      </a-row>
    </div>
    <div class="content-detail" v-else>
      <p>
        <c-button type="primary" @click="back"
          ><c-icon type="return"></c-icon>返回</c-button
        >
      </p>
      <a-carousel
        arrows
        style="margin-bottom:1em;"
        :key="banner.type + banner.data.name"
      >
        <div slot="prevArrow" style="z-index:1;left: 10px;">
          <a-icon
            type="left-circle"
            :style="{ fontSize: '30px' }"
            class="primary"
          />
        </div>
        <div slot="nextArrow" style="z-index:1;right: 10px;">
          <a-icon
            type="right-circle"
            :style="{ fontSize: '30px' }"
            class="primary"
          />
        </div>
        <img
          class="banner-item"
          :src="`/img/guide/${banner.type}/${banner.data.name}${item}.png`"
          v-for="item in banner.data.steps"
          :key="item"
        />
      </a-carousel>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDetail: false,
      typeList: {
        buyer: {
          title: "买家操作",
          buttons: [
            {
              title: "点价采购",
              steps: 6,
              name: "buyDJ"
            },
            {
              title: "申请点价额度",
              steps: 2,
              name: "buyQuota"
            },
            {
              title: "申请撤单",
              steps: 3,
              name: "buyRevoke"
            }
          ]
        },
        seller: {
          title: "卖家操作",
          buttons: [
            {
              title: "发布报价",
              steps: 4,
              name: "sellRelease"
            },
            {
              title: "审批和添加采购额度",
              steps: 6,
              name: "sellExamine"
            },
            {
              title: "处理商城订单",
              steps: 3,
              name: "sellDealOrder"
            },
            {
              title: "点价销售",
              steps: 6,
              name: "sellDJ"
            },
            {
              title: "生成合同",
              steps: 6,
              name: "sellContract"
            }
          ]
        },
        business: {
          title: "企业管理",
          buttons: [
            {
              title: "员工审核",
              steps: 3,
              name: "companyCheck"
            },
            {
              title: "业务跟进",
              steps: 4,
              name: "companyBusiness"
            },
            {
              title: "员工权限设置",
              steps: 4,
              name: "companyRule"
            },
            {
              title: "更换超级管理员",
              steps: 4,
              name: "companyAdmin"
            },
            {
              title: "点价价格限制",
              steps: 4,
              name: "companyDJ"
            }
          ]
        },
        sign: {
          title: "电子签名",
          buttons: [
            {
              title: "如何电子签名",
              steps: 2,
              type: "sign",
              name: "eSignatureNum"
            },
            {
              title: "如何验签电子签名",
              steps: 3,
              type: "sign",
              name: "eSignatureAttestation"
            }
          ]
        }
      },
      banner: {
        type: undefined,
        data: []
      }
    };
  },
  methods: {
    back() {
      this.showDetail = false;
    },
    checkDetail(data, key) {
      this.banner.type = key;
      this.banner.data = data;
      this.showDetail = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.guide {
  padding: 20px;
  .content-home {
    width: 1200px;
    margin: 0 auto;
    .content-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      .c-button {
        width: 200px;
        margin-bottom: 26px;
      }
    }
  }
  .content-detail {
    width: 1200px;
    margin: 0 auto;
  }
  ::v-deep .ant-carousel .slick-arrow {
    width: 30px;
    height: 30px;
    opacity: 0.3;
  }
  ::v-deep .ant-carousel .slick-arrow:hover {
    opacity: 1;
  }
}
</style>
